<template>
  <div id="ceshi">
    <div class="icon" style="float: left;
    height: 54px;
    line-height: 60px;
    margin-left: 10px;">
      <van-icon name="arrow-left" @click="fanhui"/>
    </div>
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      show-action
      shape="round"
      @search="onSearch"
    >
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>
    <div v-show="!show" style="text-align: left;
    margin-left: 10px;font-size: .9rem;">
      <P>搜索历史</p>
      <ul id="test">
        <li v-for="(item, index) of name" :key="index" @click="handclick(index)">
          {{item.name}}
        </li>
      </ul>
    </div>
    <div class="dplist" v-show="show">
    <van-grid :border="false" :column-num="1">
      <van-grid-item style="background:#e2e2e2;padding: 0px 2px 2px;" v-for="(item,index) of list" :key="index">
        <div id="sum">
        <div class="header">
          <div class="header-img">
            <van-image
            round
            width="2rem"
            height="2rem"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
            />
          </div>
          <div class="p">
            <p class="p1">{{item.dpname}}</p>
            <p class="p2">{{item.dpbq}}</p>
          </div>
          <div class="button">
            <router-link to="/school">
              <van-button round type="info">进店</van-button>
            </router-link>
          </div>
        </div>
        <div class="img" v-for="(img, index) of item.img" :key="index">
          <van-image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
        </div>
        <div class="bottom">
           <p style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
           {{item.p}}
           </p>
           <div class="bottom-address">
             <van-icon name="location-o" />深圳
           </div>
        </div>
        </div>
      </van-grid-item>
    </van-grid>
  </div>
  </div>
</template>

<script>
export default {
  name: 'search',
  methods: {
    onSearch () {
      if (this.value !== null && this.value !== '') {
        this.show = true
      }
    },
    handclick (index) {
      this.value = this.name[index].name
      this.show = true
    },
    fanhui () {
      this.$router.go(-1)
    }
  },
  watch: {
    value () {
      if (this.value !== null && this.value !== '') {
      } else {
        this.show = false
      }
    }
  },
  data () {
    return {
      name: [{name: '男装上衣'}, {name: '校服女款夏季'}, {name: '冬季男款'}, {name: '秋季校服'}],
      show: false,
      value: '',
      list: [{
        id: '01',
        dpname: '天猫官方旗舰店',
        dpbq: '官方授权||七天无理由退货',
        p: '跨越百年历程，斯文一脉相承。省实前身始于1872年清政府设立的“留美幼童英语先修班”，距今已有 140多 年。历代省实人秉承“爱国、团结、求实、创新”的校训及“以人为本，以德树人，以质立校”的办学理念，形成了“实验性，创新性，示范性”的办学特色，培养了包括邓锡铭、黄耀祥、范海福、蔡睿贤、姜伯驹、岑可法、钟南山等院士在内的万千优秀学子。目前学校形成了“一校九区”的发展格局：初中校区位于广州市中山四路，高中校区位于广州市荔湾区龙溪大道，天河分校位于广州市天河区天源路，顺德分校位于佛山市顺德区容桂小黄圃，南海分校位于佛山市南海里水中信大道中信山语湖，珠海金湾学校位于珠海市金湾区，荔湾省实位于荔湾区广钢地块，白云省实位于广州市白云区夏花一路，省实越秀学校位于广州市越秀区（由原越秀区外国语学校和21中合并而成）。',
        img: ['https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-1.jpg']
      }, {
        id: '02',
        dpname: '天猫官方旗舰店',
        dpbq: '官方授权||七天无理由退货',
        p: '跨越百年历程，斯文一脉相承。省实前身始于1872年清政府设立的“留美幼童英语先修班”，距今已有 140多 年。历代省实人秉承“爱国、团结、求实、创新”的校训及“以人为本，以德树人，以质立校”的办学理念，形成了“实验性，创新性，示范性”的办学特色，培养了包括邓锡铭、黄耀祥、范海福、蔡睿贤、姜伯驹、岑可法、钟南山等院士在内的万千优秀学子。目前学校形成了“一校九区”的发展格局：初中校区位于广州市中山四路，高中校区位于广州市荔湾区龙溪大道，天河分校位于广州市天河区天源路，顺德分校位于佛山市顺德区容桂小黄圃，南海分校位于佛山市南海里水中信大道中信山语湖，珠海金湾学校位于珠海市金湾区，荔湾省实位于荔湾区广钢地块，白云省实位于广州市白云区夏花一路，省实越秀学校位于广州市越秀区（由原越秀区外国语学校和21中合并而成）。',
        img: ['https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-1.jpg']
      }, {
        id: '03',
        dpname: '天猫官方旗舰店',
        dpbq: '官方授权||七天无理由退货',
        p: '跨越百年历程，斯文一脉相承。省实前身始于1872年清政府设立的“留美幼童英语先修班”，距今已有 140多 年。历代省实人秉承“爱国、团结、求实、创新”的校训及“以人为本，以德树人，以质立校”的办学理念，形成了“实验性，创新性，示范性”的办学特色，培养了包括邓锡铭、黄耀祥、范海福、蔡睿贤、姜伯驹、岑可法、钟南山等院士在内的万千优秀学子。目前学校形成了“一校九区”的发展格局：初中校区位于广州市中山四路，高中校区位于广州市荔湾区龙溪大道，天河分校位于广州市天河区天源路，顺德分校位于佛山市顺德区容桂小黄圃，南海分校位于佛山市南海里水中信大道中信山语湖，珠海金湾学校位于珠海市金湾区，荔湾省实位于荔湾区广钢地块，白云省实位于广州市白云区夏花一路，省实越秀学校位于广州市越秀区（由原越秀区外国语学校和21中合并而成）。',
        img: ['https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-1.jpg']
      }, {
        id: '04',
        dpname: '天猫官方旗舰店',
        dpbq: '官方授权||七天无理由退货',
        p: '跨越百年历程，斯文一脉相承。省实前身始于1872年清政府设立的“留美幼童英语先修班”，距今已有 140多 年。历代省实人秉承“爱国、团结、求实、创新”的校训及“以人为本，以德树人，以质立校”的办学理念，形成了“实验性，创新性，示范性”的办学特色，培养了包括邓锡铭、黄耀祥、范海福、蔡睿贤、姜伯驹、岑可法、钟南山等院士在内的万千优秀学子。目前学校形成了“一校九区”的发展格局：初中校区位于广州市中山四路，高中校区位于广州市荔湾区龙溪大道，天河分校位于广州市天河区天源路，顺德分校位于佛山市顺德区容桂小黄圃，南海分校位于佛山市南海里水中信大道中信山语湖，珠海金湾学校位于珠海市金湾区，荔湾省实位于荔湾区广钢地块，白云省实位于广州市白云区夏花一路，省实越秀学校位于广州市越秀区（由原越秀区外国语学校和21中合并而成）。',
        img: ['https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-1.jpg']
      }]
    }
  }
}
</script>

<style scoped>
  body{
    padding-bottom: 42px;
  }
  .header{
    overflow: hidden;
    height: 2rem;
    line-height: 2rem;
  /*  position: absolute;
    top: 0;
    width:100%; */
  }
  .header-img {
    position: relative;
    overflow: hidden;
  }
  .p {
    position: absolute;
    margin-left: 2rem;
    text-align: -webkit-left;
  }
  .p1 {
    position: relative;
    /* left: 0.4rem; */
    top: -3.3rem;
    font-size: .85rem;
    /* width: 100%; */
    /* text-align: -webkit-left; */
  }
  .p2 {
    font-size: .7rem;
    position: relative;
    top: -5.1rem;
    /* left: 2.4rem; */
    /* color: #6a6a6a; */
    /* text-align: -webkit-left; */
  }
  .button {
    position: relative;
    top: -33px;
    height: 1.5rem;
    font-size: .7rem;
    text-align: -webkit-right;
  }
  .van-button--info {
    color: #fff;
    background-color: #f95500;
    border: 1px solid #ff4000;
}
.van-button--normal {
    padding: 0 15px;
}
.van-button {
  height: 1.5rem;
  line-height: 1.5rem;
}
  /*.img {
    margin-top: 1rem;
    overflow: hidden;
  }*/
  .van-image {
    width: 33.33%;
    float: left;
  }
  .bottom{
    width: 100%;
    height: 4rem;
    overflow: hidden;
    font-size: .6rem;
    /* position: relative; */
    /* bottom: 0rem; */
    /* top: 0rem; */
    margin: 0;
    padding: 0;
  }
  .bottom-address{
    float:left;
    color:#f95500;
    position: relative;
    top: -8px;
    font-size: .9rem;
  }
 li{
 background: #cecece;
    min-width: 50px;
    float: left;
    border-radius: 1.3rem;
    text-align: center;
    padding: 2px 13px;
    font-size: 12px;
    height: 28px;
    line-height: 28px;
    margin-left: 20px;
    margin-top: 5px;
 }
</style>
